<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background: radial-gradient(
            #419af6 26%,
            white 0,
            white 30%,
            transparent 0
          ),
          linear-gradient(120deg, #5dd52f 50%, transparent 0) 0 100% / 115% 44%,
          linear-gradient(60deg, #5dd533 50%, transparent 0) 0 0/ 35% 70%,
          linear-gradient(120deg, #ff0000 50%, transparent 0) 0 0 / 50% 197%,
          linear-gradient(red, red) 0 0 / 100% 29%,
          linear-gradient(#fdeb35, #fce72a);
        background-repeat: no-repeat;
        border-radius: 100%;
        border: 8px solid white;
      }
    </style>
  </head>
  <body>
    <div></div>

    <script>
      // 给整个文档添加文本框
      // (function() {
      //   var style = document.querySelector("#_outline_");
      //   if (style) {
      //     style.parentNode.removeChild(style);
      //   } else {
      //     style = document.createElement("style");
      //     style.id = "_outline_";
      //     style.innerHTML = "h1{outline: 1px dashed red}";
      //     document.head.appendChild(style);
      //   }
      // })();
    </script>

    <script>
      function submitUpload() {
        var progressSpan = document.getElementById("progress")
          .firstElementChild;
        var fileList = document.getElementById("f1").files;
        progressSpan.style.width = "0";
        progressSpan.classList.remove("green");

        if (!fileList.length) {
          alert("请选择文件");
          return;
        }

        var fd = new FormData(); //构造FormData对象
        fd.append("title", document.getElementById("title").value);

        for (var i = 0; i < fileList.length; i++) {
          fd.append("f1", fileList[i]); //支持多文件上传
        }

        var xhr = new XMLHttpRequest(); //创建对象
        xhr.open("POST", "http://10.70.65.235:8100/", true);

        xhr.onreadystatechange = function() {
          console.log("state change", xhr.readyState);
          if (xhr.readyState == 4) {
            var obj = JSON.parse(xhr.responseText); //返回值
            console.log(obj);
            if (obj.fileUrl.length) {
              //alert('上传成功');
            }
          }
        };

        xhr.onprogress = updateProgress;
        xhr.upload.onprogress = updateProgress;
        function updateProgress(event) {
          console.log(event);
          if (event.lengthComputable) {
            var completedPercent = ((event.loaded / event.total) * 100).toFixed(2);
            progressSpan.style.width = completedPercent + "%";
            progressSpan.innerHTML = completedPercent + "%";
            if (completedPercent > 90) {
              //进度条变色
              progressSpan.classList.add("green");
            }
            console.log("已上传", completedPercent);
          }
        }
        //注意 send 一定要写在最下面，否则 onprogress 只会执行最后一次 也就是100%的时候
        xhr.send(fd); //发送时  Content-Type默认就是: multipart/form-data;
      }
      //绑定提交事件
      document
        .getElementById("btn-submit")
        .addEventListener("click", submitUpload);
    </script>
  </body>
</html>
